<template>
  <div>
    <p>
      您输入的地址有误，请检查后重试！
    </p>
    <hr>
    <!-- 声明式导航,通过内置组件导航 -->
    <!-- to：必填属性，跳转的目的 -->
    <!-- tag：修改标签名，不常用 -->
    <!-- replace：用新的url替换老的url，整个历史记录只有一条，不常用 -->
    <!-- active-class：激活时的class名 -->
    <router-link to="/" active-class="act666">返回首页</router-link>
    <br />
    <!-- <router-link to="/contact" tag="button" replace>联系人</router-link> -->
    <router-link to="/contact" tag="button" active-class="act666">联系人</router-link>
    <br />
    <router-link to="/404" active-class="act666">404页面</router-link>
    <hr>
    <!-- 编程式导航 -->
    <button @click="changePage('/')">返回首页</button>
    <button @click="changePage('/contact')">联系人</button>
    <button @click="changePage('/404')">404</button>
    <hr>
    <button @click="jump">命名路由-联系人</button>
    <router-link :to="{name: 'con'}">命名路由-联系人</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '666'
    }
  },
  methods: {
    changePage(url) {
      // 通过函数导航
      // 逻辑代码...
      // console.log(this.$router);
      this.$router.push(url);
      // this.$router.replace(url);  // 用新的url替换老的url，整个历史记录只有一条，不常用
      // this.$router.go(-1); // go中的参数必须是非零整数，大于零就前进，小于零就后退
    },
    jump() {
      // 通过命名路由跳转，使用name而不是path
      this.$router.push({
        name: 'con'
      })
    }
  },
}
</script>

<style>

</style>